<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button class="addButton" preIcon="ant-design:plus-outlined" @click="newProjectBut"> 新建项目</a-button>
        <a-input style="width: 181px" v-model:value="queryParam.projectName" @input="InputChange" placeholder="请输入项目名称">
          <template #prefix>
            <search-outlined />
          </template>
        </a-input>
      </template>

      <template #status="{ record, text }">
        <!-- {{ text }} -->
        <div :class="text == 0 ? 'projectStatus' : text == 1 ? 'projectStatus2' : 'projectStatus3'">{{ ['进行中', '暂存', '已完结'][text] }}
        </div>
      </template>

      <template #adminList="{ record, text }">
        {{ memberQuery(text) }}
      </template>

      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <newProjectModal :footer="null" :open="ProjectOpen" :edit="editStatus" :queryId="queryId" @close="close"
      @saveSuccess="saveSuccess">
    </newProjectModal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import type { ActionItem } from '/@/components/Table';
import { columns } from './data';
import newProjectModal from './newProjectModal.vue';
import { list, UserList } from './data.api'
import { SearchOutlined } from '@ant-design/icons-vue';
const router = useRouter();
let ProjectOpen = ref<Boolean>(false)
let editStatus = ref<Boolean>(false)
let queryId = ref()
let user = ref()
const { tableContext } = useListPage({
  designScope: 'projectManageList',
  tableProps: {
    title: '项目管理',
    api: list,
    striped: true,//斑马纹设置
    bordered: false,//是否显示表格边框
    useSearchForm: false,//是否使用搜索表单
    columns: columns,
    tableSetting: {
      redo: false,
      size: false,
      setting: false,
      fullScreen: false,
    },
  }
})
let queryParam = reactive({
  projectName: ''
});
const [registerTable, { reload, setProps }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;

function getTableAction(record): ActionItem[] {
  return [
    { label: '详情', onClick: () => router.push({ path: '/projectManage/projectDetail', query: { id: record.id } }) },
    { label: '编辑', onClick: () => { ProjectOpen.value = true, editStatus.value = true, queryId.value = record.id } },
  ]
}

function newProjectBut() {
  ProjectOpen.value = true
  editStatus.value = false
}

function close() {
  ProjectOpen.value = false
  editStatus.value = false
}

function saveSuccess() {
  reload()
}

function memberQuery(val) {
  if (typeof val !== 'string') {
    return [];
  }
  const arr = val.split(',');
  const matchingItems = [];
  if (user.value && Array.isArray(user.value)) {
    for (let i = 0; i < arr.length; i++) {
      user.value.forEach(item => {
        if (item.id == arr[i]) {

          matchingItems.push(item.realname)
        }
      })
    }
  }
  return matchingItems.join('，')
}

function searchQuery() {
  setProps({ searchInfo: toRaw(queryParam) });
  reload()
}
let timer: ReturnType<typeof setTimeout>;
function InputChange(e) {
  queryParam.projectName = e.target.value;
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    // setProps({ deviceName: e.target.value });
    searchQuery()
    // reload()
  }, 500);
}

onMounted(async () => {
  const res = await UserList()
  user.value = res.records
})
</script>
<style lang="less" scoped>
/deep/ .jeecg-basic-table-header__table-title-box {
  border-bottom: 1px solid #f8fafb;
}

/deep/ .ant-table-thead>tr>th {
  background: #edf6fb;
  color: #0F699A;
}

/deep/ .jeecg-basic-table-row__striped>td {
  background-color: #f7fbfc;
}

/deep/ .ant-table-tbody>tr.ant-table-row:hover>td,
.ant-table-tbody>tr>td.ant-table-cell-row-hover {
  background: #eef6fa;
}

/deep/ .jeecg-basic-table-header__toolbar {
  width: 364px;
}

.addButton {
  background: linear-gradient(315deg, #1792D6 0%, #0E6EA1 100%);
  border-radius: 2px;
  color: white;
  border: none;
}

.projectStatus {
  background-color: #E4F4FC;
  color: #17ABD1;
  width: 46px;
  height: 19px;
  font-weight: 400;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 12px;
  text-align: center;
  // margin: 0 auto;
}

.projectStatus2 {
  background-color: #FCF7E4;
  color: #ED8B2B;
  width: 46px;
  height: 19px;
  font-weight: 400;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 12px;
  text-align: center;
  // margin: 0 auto;
}

.projectStatus3 {
  background-color: #E7F7F1;
  color: #15B37A;
  width: 46px;
  height: 19px;
  font-weight: 400;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 12px;
  text-align: center;
  // margin: 0 auto;
}
</style>
